<template>
  <view>
    <u-navbar
      v-if="!$isWeixin()"
      :title="title"
      :titleWidth="450"
      :titleBold="true"
      :background="{ backgroundColor: '#ffffff' }"
      :is-fixed="true"
    ></u-navbar>

    <u-tabs active-color="#FF7A23" :list="tabList" :current="tabIndex" @change="index => (tabIndex = index)"></u-tabs>

    <view class="" v-if="tabIndex === 0"><relations :list="state.This_Dealer_RelationList"></relations></view>

    <view class="" v-if="tabIndex === 1">
      <u-cell-item :arrow="false" title="一级经销商名称" :value="state.First_Dealer_BaseInfo.Name"></u-cell-item>
      <u-cell-item :arrow="false" title="二级经销商名称" :value="state.Double_Dealer_BaseInfo.Name"></u-cell-item>
      <u-cell-item :arrow="false" title="门店名称" :value="state.Door_Dealer_BaseInfo.Name"></u-cell-item>
      <u-cell-item :arrow="false" title="门店代码" :value="state.Door_Dealer_BaseInfo.Account"></u-cell-item>

      <store-renovation-information
        :showPayType="false"
        :showIsExclusive="false"
        :showReview="false"
        :data="{
          EffectList: state.EffectList,
          RealList: state.RealList,
          Contract_PhotoList: state.Contract_PhotoList,
          Distribution_PhotoList: state.Distribution_PhotoList,
          Price: state.StoreRenovationApplyInfo.Price,
          Account: state.Double_Dealer_BaseInfo.Account
        }"
      ></store-renovation-information>
    </view>

    <view class="" v-if="tabIndex === 2">
      <u-cell-group>
        <u-cell-item title="协议" :arrow="false" style="padding-bottom: 0;" :border-bottom="false"></u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <image-upload @change="onImageChange" v-model="imageList"></image-upload>
        </u-cell-item>
        <u-cell-item style="padding: 10rpx;" :arrow="false">
          <file-picker @change="onFileChange" v-model="fileList"></file-picker>
        </u-cell-item>

        <u-cell-item title="备注" :arrow="false">
          <u-input v-model="form.ApplicationRemake" type="textarea" inputAlign="right" placeholder="备注"></u-input>
        </u-cell-item>
      </u-cell-group>
    </view>

    <view class="btn-group-fixed">
      <u-button :disabled="btnDisabled" type="warning" @tap="submit">保存提交</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnDisabled: false,
      title: '',
      tabList: [{ name: '销售业务关系' }, { name: '专卖店费用信息' }, { name: '协议回传' }],
      tabIndex: 0,

      StoreRenovationId: 1040,

      imageList: [],
      fileList: [],

      state: {
        ShowLevel: '',
        First_Dealer_BaseInfo: {},
        Double_Dealer_BaseInfo: {},
        Door_Dealer_BaseInfo: {},
        This_Dealer_OtherInfo: {},
        This_Dealer_RelationList: [],
        StoreRenovationApplyInfo: {},
        EffectList: [],
        RealList: []
      },

      form: {
        DealerId: '',
        Type: 2,
        ObjectId: '',
        ApplicationRemake: '',
        AgreementPhotoList: []
      }
    };
  },

  onLoad(options) {
    if (options.StoreRenovationId) {
      this.StoreRenovationId = options.StoreRenovationId;
      this.form.ObjectId = options.StoreRenovationId;
    }
    if (options.DealerId) {
      this.form.DealerId = options.DealerId;
    }

    if (options.ApplyType) {
      if (options.ApplyType == 1) {
        this.title = '动力金验收';
      }
      if (options.ApplyType == 2) {
        this.title = '渠道补贴验收';
      }
    }

    this.init();
    if (this.$isWeixin()) {
      this.$setTitle(this.title);
    }
  },

  methods: {
    onImageChange(list) {
      const initialPhotoList = [];
      if (this.fileList.length > 0) {
        initialPhotoList.push(...this.filesList);
      }
      initialPhotoList.push(...list);
      this.form.AgreementPhotoList = initialPhotoList;
    },

    onFileChange(list) {
      const initialPhotoList = [];
      if (this.imageList.length > 0) {
        initialPhotoList.push(...this.imageList);
      }
      initialPhotoList.push(...list);
      this.form.AgreementPhotoList = initialPhotoList;
    },

    submit() {
      let me = this;
      me.btnDisabled = true;
      console.log(this.form);
      this.$u.api.submitAgreement(this.form).then(res => {
        const { ResultCode, ResultMessage } = res;
        if (ResultCode === 1) {
          this.$u.toast(ResultMessage);
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        } else {
          me.btnDisabled = false;
        }
      });
    },
    init() {
      this.$u.api
        .getStoreRenovationReviewDetail({
          StoreRenovationId: this.StoreRenovationId
        })
        .then(res => {
          console.log(res);
          const { ResultCode, ResultMessage, ResultData } = res;
          if (ResultCode === 1) {
            this.state = ResultData;
          }
        });
    }
  }
};
</script>

<style lang="scss"></style>
